<template>
	<div>
		<Codemirror v-model="code" placeholder="Code gose here..." :style="{ height: '100%' }" :tabSize="2" :options="options" @input="change"/>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, onMounted } from 'vue'
import { Codemirror } from "vue-codemirror";
// 引入主题 可以从 codemirror/theme/ 下引入多个
import { oneDark } from '@codemirror/theme-one-dark'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import {javascript} from '@codemirror/lang-javascript';
import { sql } from "@codemirror/lang-sql";
// @ts-ignore 
export default defineComponent({
	name: 'MirrorTextArea',
	components: { Codemirror},
	props: {
		modelValue: String,
		language: String,
	},
	emits:['update:modelValue'],
	setup(props, ctx) {
		const state = reactive({
			code: props.modelValue,
			mode: 'text/x-sql',
			extensions: [],
			options: {
				tabSize: 4,
				mode: {
					name: javascript,
					json: true
				},
				theme: 'foo bar',
				lineNUmbers: true,
				lineWrapping: true,
				extraKeys: { 'Ctrl': 'autocomplete' },
				lineWiseCopeCut: true,
				showCursorWhenSelecting: true,
				matchBrackets: true,
				line: true
			}
		})
		onMounted(() => {
			if(props.language === 'sql'){
				state.mode = 'application/x-sql'
				// state.extensions = [sql(), oneDark]
			} else if(props.language === 'json') {
				state.mode = 'application/json'
			} else if(props.language === 'groovy') {
				state.mode = 'text/x-groovy'
			} else{
				state.mode = 'text/javascript'
				// state.extensions = [javascript(), oneDark]
			}
		})
		const change = (content: any) => {
			ctx.emit("update:modelValue", content)
		}
		return {
			change,
			...toRefs(state),
		}
	}
})
</script>